<template>
    <div class="fdisr main">
        <div class="ball-con fdisc">
            <div class="front-con fdisr">
                <div v-for="item in 35" class="front-ball ball">{{ item }}</div>
            </div>
            <div class="back-con fdisr">
                <div v-for="item in 12" class="front-ball ball">{{ item }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";


let frontBallList = ref([])
let backBallList = ref([])
</script>


<style lang="scss" scoped>
.main{
    width: 100%;
    .ball-con{
        width: 40%;
        height: 600px;
        border: 1px solid #000;
        .front-con{
            width: 100%;
            border-bottom: 1px solid #000;
            flex-wrap: wrap;

        }
        
        .back-con{
            width: 100%;
        }

        .ball{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: black;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin: 5px 3px;
            cursor: pointer;
            font-size: 14px;
            border: 1px solid #333;
        }

        .front-ball{
            border: 1px solid #333;
        }
    }
}
</style>